<template>
	<view class="patientInfo">
		<view class="Info">
			<view class="baseInfo">
				<view class="name">
					{{patientInfo.patientName}}
					<up-icon name="woman" style="margin-left: 6rpx;margin-top: 10rpx;" size='20' color='pink'
						v-if='patientInfo.patientSex=="女"'></up-icon>
					<up-icon name="man" v-if='patientInfo.patientSex=="男"' style="margin-left: 6rpx;margin-top: 10rpx;" size='20'
						color='skyblue'></up-icon>
				</view>
				<view class="name">
					{{patientInfo.bedNo}}床
					<up-icon name="scan" size="30" style="margin-top: 10rpx;margin-left: 30rpx;" @click="scanFn(item)"></up-icon>
				</view>
			</view>
			<view class="baseInfo">
				<view class="common">
					<view class="bedNum">
						年龄：
					</view>
					{{patientInfo.patientAge}}岁
				</view>
				<view class="common">
					<view class="bedNum">
						就诊卡号：
					</view>
					{{patientInfo.medicalNum}}
				</view>
			</view>
		</view>

		<view class="content">
			<view class="item" v-for="(item,index) in patientList" :key="index">
				<view class="common">
					<view class="bedNum" style="width: 140rpx;">
						医嘱内容：
					</view>
					<view style="font-size: 30rpx;color:black;">
						{{item.cmdNote}}
					</view>
				</view>
				<view class="common">
					<view class="bedNum">
						开立时间：
					</view>
					{{item.createTime}}
				</view>
				<view class="common usage">
					<view class="row" v-if="item.dosage">
						<view class="bedNum ">
							单次用量：
						</view>
						{{item.dosage}}ml
					</view>
					<view class="row">
						<view class="bedNum">
							用法：
						</view>
						{{item.usageName}}
					</view>
				</view>

				<view class="common usage">
					<view class="row">
						<view class="bedNum ">
							状态：
						</view>
						<view class="execute" :class="[item.cmdState=='已完成'?'execute':'unexecuted']">
							{{item.cmdState}}
						</view>
					</view>
					<view class="row" v-if="item.cmdState=='已完成'">
						<view class="bedNum">
							执行时间：
						</view>
						{{item.updateTime}}
					</view>
					<!-- 					<up-icon name="scan" size="30" style="margin-top: 10rpx;"
						v-if="item.cmdState=='提交中'&&item.usageName=='iv.gtt'" @click="scanFn(item)"></up-icon> -->
				</view>
			</view>

		</view>

		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getMedicalDetailsAPI,
		executeCmdAPI,
		getCmdInfoAPI,
	} from '../../../api/reserveResources.js'
	const state = reactive({
		patientInfo: [],
		patientList: [],
	})
	const {
		patientInfo,
		patientList
	} = toRefs(state)
	onLoad((options) => {
		patientInfo.value = JSON.parse(options.info)
		getMedicalDetailsFn()
	})

	const getMedicalDetailsFn = async () => {
		const res = await getMedicalDetailsAPI({
			hospitalId: patientInfo.value.hospitalId,
			pageNum: 1,
			pageSize: 100,
			patientId: patientInfo.value.id
		})
		if (res.records.length > 0) {
			patientList.value = res.records.map(item => {
				let obj = {
					patientName: item.patientName,
					patientSex: item.patientSex,
					paymentStatus: item.paymentStatus,
					usageName: item.usageName,
					updateBy: item.updateBy,
					updateTime: item.updateTime,
					cmdState: item.cmdState,
					dosage: item.dosage,
					createTime: item.createTime,
					cmdNote: item.cmdNote,
					cmdId: item.cmdId,
					patientCmdExecutionRecordList: item.patientCmdExecutionRecordList,
					id: item.id
				}
				return obj
			})
		}
	}
	const uToastRef = ref(null)
	// 扫码
	const scanFn = (item) => {
		uni.scanCode({
			success: (res) => {
				executeCmdFn(JSON.parse(res.result).id)
			},
			fail: (err) => {
				uToastRef.value.show({
					type: 'error',
					message: '扫描失败,请重试',
				})
			}
		});
	}
	const executeCmdFn = async (id) => {
		let cmdInfo = await getCmdInfoAPI(id)
		if (cmdInfo.code == 200) {
			cmdInfo.data.cmdState = '已完成'
			cmdInfo.data.patientCmdExecutionRecordList = [{
				cmdState: '已完成'
			}]
			let arr = []
			arr.push(cmdInfo.data)

			// 发请求 执行医嘱
			let executeRes = await executeCmdAPI(arr)
			if (executeRes.code == 200) {
				getMedicalDetailsFn()
				uToastRef.value.show({
					type: 'success',
					message: '医嘱执行成功',
				})
			} else {
				uToastRef.value.show({
					type: 'error',
					message: '医嘱执行失败,请重试',
				})
			}
		} else {
			uToastRef.value.show({
				type: 'error',
				message: '医嘱详情查询失败,请重试',
			})
		}
	}
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		width: 100%;
		color: #393e46;
		font-size: 30rpx;
	}

	.common {
		display: flex;
		margin-bottom: 10rpx;

		.bedNum {
			color: #898a89;
			font-size: 26rpx;
		}
	}

	.execute {
		// background-color: #62d2a2;
		padding: 0 8rpx;
		border-radius: 12rpx;
		border: 2rpx solid #62d2a2;
		color: #62d2a2;
	}

	.unexecuted {
		// background-color: #62d2a2;
		padding: 0 8rpx;
		border-radius: 12rpx;
		border: 2rpx solid #fa4659;
		color: #fa4659;
	}

	.patientInfo {
		height: 100%;
		background-color: #eefdfb;
		display: flex;
		flex-direction: column;
		overflow-y: hidden;

		.Info {
			padding: 20rpx 40rpx;
			background-color: #fff;

			.baseInfo {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20rpx;

				.name {
					display: flex;
					font-size: 50rpx;
					font-weight: 600;
				}

			}
		}

		.content {
			margin-top: 20rpx;
			padding: 20rpx;
			overflow-y: auto;

			.item {
				border-radius: 20rpx;
				padding: 20rpx;
				background-color: #fff;
				margin-bottom: 20rpx;

				.usage {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.row {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>